<template>
  <div>
    <van-row class="shop-footer" type="flex" justify="center">
      <van-col span="5">
        <div class="mobile" @click="actionSheetShow = true">联系商家</div>
      </van-col>
      <van-col span="5" @click="ticketGetIndex">领券</van-col>
      <van-col span="9">
        <div class="price">
          <van-badge>
            <div class="child" />
            <van-icon name="cart-o" :badge="count" />
          </van-badge>
          <span class="pricewarp">{{ money }}元 </span>
        </div>
      </van-col>
      <van-col span="5" class="count" @click="toOrderIndex">结算</van-col>
    </van-row>
    <van-action-sheet
      v-model="actionSheetShow"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancelAction"
    />
  </div>
  <!-- 商家联系人 -->
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      actionSheetShow: false,
      actions: [{ name: '拨打电话' }, { name: '立即聊天' }],
      number: 10
    }
  },
  computed: {
    ...mapState('m_home', ['count', 'money'])
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onCancelAction() {
      this.$toast('取消')
    },
    // 进入结算页面
    toOrderIndex() {
      this.$router.replace('/order')
    },
    // 进入领券页面
    ticketGetIndex() {
      this.$router.replace('/order/ticket/get')
    }
  }
}
</script>

<style scoped lang="less">
.shop-footer {
  position: fixed;
  bottom: 0px;
  right: 0;
  left: 0;
  font-size: 32px;
  text-align: center;
  height: 56px;
  line-height: 56px;
  padding: 5px;
  background-color: #fff;
  .van-col {
    border: 1px solid #000;
    box-sizing: border-box;
    .price {
      position: relative;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      text-align: left;
      .van-icon {
        font-size: 60px;
        text-align: left;
        padding-left: 50px;
      }
      .pricewarp {
        display: inline-block;
        position: absolute;
        padding-left: 20px;
        top: 5px;
      }
    }
  }
  .count {
    background-color: #15d200;
  }
}
.hidden {
  display: none;
}
</style>
